<template>
    <div class="addGuestBook">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle" id="optionGuestBook">新建留言管理</span></el-divider>
        </div>
        <div class="guestBookSetNav">
        </div>
        <div class="addContent">
            <!--开启表单验证：:rules="rules" ref="moudle" 表单右侧验证符号 status-icon -->
            <el-form :model="guestBook" status-icon :rules="rules" label-width="100px" ref="guestBook"
                     :label-position="labelPosition">

                <el-form-item label="留言会员" prop="employeeId">
                    <el-autocomplete class="employeeInput"
                                     popper-class="my-autocomplete"
                                     v-model="memberId"
                                     :fetch-suggestions="querySearchMember"
                                     placeholder="请输入会员名称筛选"
                                     @select="handleSelectMember" :disabled="memberDisable">
                        <i
                                class="el-icon-edit el-input__icon"
                                slot="suffix"
                                @click="handleIconClickMember">
                        </i>
                        <template slot-scope="{ item }">
                            <div class="name">姓名：{{ item.nickName }}
                                |&nbsp;<span class="posi">电话号：{{ item.mobile }}</span>
                            </div>
                            <hr class="emp_line">
                        </template>
                    </el-autocomplete>

                </el-form-item>
                <el-form-item label="所属员工" prop="employeeId">
                    <el-autocomplete class="employeeInput"
                                     popper-class="my-autocomplete"
                                     v-model="employeeId"
                                     :fetch-suggestions="querySearch"
                                     placeholder="请输入员工"
                                     @select="handleSelect"
                                     :disabled="employeeDisable">
                        <i
                                class="el-icon-edit el-input__icon"
                                slot="suffix"
                                @click="handleIconClick">
                        </i>
                        <template slot-scope="{ item }">
                            <div class="name">姓名：{{ item.name }}
                                |&nbsp;<span class="posi">职位：{{ item.position }}</span>
                            </div>
                            <hr class="emp_line">
                        </template>
                    </el-autocomplete>

                </el-form-item>

                <el-form-item label="留言内容" prop="content">
                    <el-input maxlength="500" show-word-limit type="textarea" :rows="5" id="content" class="inputLine" v-model="guestBook.content"></el-input>
                </el-form-item>
                <el-form-item label="回复内容" prop="replyContent">
                    <el-input maxlength="500" show-word-limit type="textarea" :rows="5" id="contentReply" class="inputLine" v-model="guestBook.replyContent"></el-input>
                </el-form-item>

                <el-form-item>
                    <!--这里save(formName)方法保存，ref别名的guestBook-->
                    <el-button id="submitBtn" type="primary" @click="save('guestBook')">立即发送</el-button>
                    <el-button @click="resetForm('guestBook')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AddGuestBook",
        props: {
            list: {
                type: Function,
                default: null
            },
        },
        data() {
            let contentValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("留言内容不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("留言内容至少为3个字符"));
                } else {
                    callback();
                }
            };
            return {
                message: '这里是更新留言管理表页面',
                guestBook: {
                    uniId: '',
                    memberId: '',
                    employeeId: '',
                    content: '',
                    replyContent: '',
                    reply: '',
                    parentId: '',
                    isShow: 1,
                    sort: 0,
                    createTime: '',
                    updateTime: '',
                },
                members: [],
                memberId: '',
                memberDisable: true,
                employeeDisable:true,
                employees: [],
                employeeId: '',
                labelPosition: 'left',

                rules: {
                    /*content: [
                        {validator: contentValidate, trigger: 'blur'}
                    ],*/

                },

            }
        },
        mounted() {
            this.members = SessionStorage.get(MEMBER_ALL);
            this.employees = SessionStorage.get(EMP_ALL);
            if (this.$route.params.guestBook != null) {
                this.guestBook = this.$route.params.guestBook;
                for (let i = 0; i < this.employees.length; i++) {
                    if (this.guestBook.employeeId === this.employees[i].uniId) {
                        this.employeeId = this.employees[i].name;
                    }
                }
                for (let i = 0; i < this.members.length; i++) {
                    if (this.guestBook.memberId === this.members[i].uniId) {
                        this.memberId = this.members[i].nickName;
                    }
                }
                /*this.employeeId=this.guestBook.employeeId;
                this.memberId=this.guestBook.memberId;*/

                this.memberDisable = true;
                this.employeeDisable=true;
                let optionGuestBook = document.getElementById("optionGuestBook");
                let submitBtn = document.getElementById("submitBtn");
                optionGuestBook.innerHTML = '更新留言管理';
                submitBtn.innerHTML = "更新留言";
            } else if (this.$route.params.parentId != null) {
                this.guestBook.parentId = this.$route.params.parentId;
                this.memberId = this.$route.params.memberId;
                this.employeeId = this.$route.params.employeeId;
            } else {
                this.memberDisable = false;
                this.employeeDisable=false;
                this.guestBook.parentId = "0";
            }
        },
        methods: {

            //1.新增留言管理表
            save(formName) {
                let _this = this;
                let responseMsg = '';
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        for (let i = 0; i < this.members.length; i++) {
                            if (this.memberId === this.members[i].nickName) {
                                this.memberId = this.members[i].uniId;
                            }
                        }
                        for (let i = 0; i < this.employees.length; i++) {
                            if (this.employeeId === this.employees[i].name) {
                                this.employeeId = this.employees[i].uniId;
                            }
                        }
                        this.guestBook.memberId = this.memberId;
                        this.guestBook.employeeId = this.employeeId;
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/guestBook/save', this.guestBook)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response;

                                if (resp.success) {
                                    this.$router.push("/source/guestBook/set");
                                    //引入全局变量toast提示
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            /*员工筛选*/
            handleSelect(item) {
                //将选择结果放入emp做显示
                this.guestBook.employeeId = item.uniId;
                this.employeeId = item.name;
            },
            handleIconClick(ev) {
                console.log("这里emp-icon被点击：", ev);
            },
            querySearch(queryString, cb) {
                let empList = this.employees;
                //对传入的数组进行过滤
                let results = queryString ? empList.filter(this.createFilter(queryString)) : empList;
                cb(results);
            },
            createFilter(queryString) {
                return (emp) => {
                    //默认显示首字匹配的列表项，若要包含输入字的所有列表项===0 --> !==-1
                    return (emp.name.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
                };
            },

            handleSelectMember(item) {
                //将选择结果放入emp做显示
                this.guestBook.memberId = item.uniId;
                this.memberId = item.nickName;
            },
            handleIconClickMember(ev) {
                console.log("这里member-icon被点击：", ev);
            },
            querySearchMember(queryString, cb) {
                let memberList = this.members;
                //对传入的数组进行过滤
                let results = queryString ? memberList.filter(this.createFilterMember(queryString)) : memberList;
                cb(results);
            },
            createFilterMember(queryString) {
                return (member) => {
                    //默认显示首字匹配的列表项，若要包含输入字的所有列表项===0 --> !==-1
                    return (member.nickName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
                };
            },
        },
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topNav {

    }

    /deep/ .el-divider__text {
        background-color: #1d7dd6;
        padding: 8px 20px;
    }

    .topLine {
        background-color: #1d7dd6;
    }

    .lineIcon {
        font-size: 22px;
        color: #ffffff;
        position: relative;
        margin-right: 5px;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #ffffff;
    }

    /*留言管理表设置导航*/
    .guestBookSetNav {
        max-width: 400px;
        margin: 5px auto;

    }

    .guestBookSetNavTile {
        cursor: pointer;
    }

    /*内容区位置*/
    .addContent {
        margin-left: 5%;
        margin-top: 35px;
        margin-right: 5%;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    /*输入行控制*/
    .inputLine {
        max-width: 350px;
        float: left;
    }

    /*关键字标签*/
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .titleLeft {
        float: left;
    }

    /*SEO描述*/
    .textAreaWidth {
        max-width: 400px;
        float: left;
    }

    /*图片上传：取消upload打开的input默认按钮*/
    /deep/ input[type=file] {
        display: none;
    }

    /*错误提示*/
    #guestBookTitle {
        float: left;
    }

    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /*提示框的字符颜色*/
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*是否显示*/
    /deep/ .el-switch {
        line-height: 40px;
    }

    /*头像上传：如果没有可删除，picList*/
    .avatar-uploader {
        float: left;
    }

    .avatar-uploader {
        border: 1px dashed #a8a2a2;
        border-radius: 6px;
        cursor: pointer;
        overflow: hidden;
        text-align: center;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader:hover .avatar-uploader-icon {
        color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    /*员工筛选*/
    .employeeInput {
        float: left;
        max-width: 350px;
        width: 100%;
    }

    .emp_line {
        margin: 0;
    }
</style>